<template>

  <div>
    <div class="outdiv biaoti">评价管理</div>
    <hr style="height:1px;border: none;border-top:1px solid #ddd;">
    <div class="outdiv">
      <!--条件查询和设置敏感词-->
      <div id="chaxun" class=" clear">
        <el-select placeholder="请选择查询类型" v-model="xuanzeleixing" class="xialakuang">
          <el-option label="客户名" value="客户名"></el-option>
          <el-option label="司机名" value="司机名"></el-option>
          <el-option label="客户手机号" value="客户手机号"></el-option>
          <el-option label="订单号" value="订单号"></el-option>
          <el-option label="查询全部" value="查询全部"></el-option>
        </el-select>
        <el-input placeholder="请输入内容" v-model="chaxunneirong" clearable>
        </el-input>
        <div class="block zuoyoubianju">
          <span class="demonstration">下单时间: </span>
          <el-date-picker value-format="yyyy-MM-dd" v-model="shijianfanwei" type="datetimerange" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </div>
        <el-button type="primary" plain @click="tiaojianchaxun" icon="el-icon-search" circle></el-button>
        <el-tooltip content="查看全部" placement="top">
          <el-button type="warning" plain @click="chaxun()" icon="el-icon-refresh" circle></el-button>
        </el-tooltip>
        <el-tooltip content="设置敏感词" placement="top">
          <el-button type="danger" plain @click="minganci = true" icon="el-icon-setting" circle></el-button>
        </el-tooltip>
      </div>
      <!--敏感词框-->
      <el-dialog title="敏感词" :visible.sync="minganci" width="30%" center>
        <span id="mingantishi">(多个敏感词，请用 “ , ” 隔开)</span>
        <el-input class="mingancishurukuang" type="textarea" :rows="3" placeholder="请输入内容" v-model="mingancineirong">
        </el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="minganci = false">取 消</el-button>
          <el-button type="primary" @click="quedingminganci">确 定</el-button>
        </span>
      </el-dialog>


      <!--渲染表格-->
      <el-table :data="dangqianyeTableData" style="width: 100%">
        <el-table-column prop="order_number" label="订单编号">
        </el-table-column>
        <el-table-column prop="user_name" label="客户名">
        </el-table-column>
        <el-table-column prop="driver_name" label="司机名">
        </el-table-column>
        <el-table-column prop="user_phone" label="客户手机号">
        </el-table-column>
        <el-table-column label="星数">
          <template slot-scope="scope">
            <el-rate v-model="scope.row.star_number" disabled show-score text-color="#ff9900">
            </el-rate>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="small" plain circle icon="el-icon-s-grid"  @click=dianjixiangqing(scope.row)></el-button>
            <el-button type="danger" size="small" plain icon="el-icon-delete" circle @click="open(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <el-pagination :current-page='elPage' @current-change=elChangePage :page-size='pageSize'
        layout="prev, pager, next" :total="tableData.length">
      </el-pagination>
    </div>
    <!--详细评价框-->
    <el-dialog title="详细评价" :visible.sync="dialogVisible" width="40%" height="500px" center>
      <div id="xingshu" class="clear">
        <p>星数:</p>
        <el-rate v-model="xiangqingData.star_number" disabled text-color="#ff9900">
        </el-rate>
      </div>
      <p>评价内容:</p>
      <p id="jutineirong">{{xiangqingData.evaluate}}</p>
      <p id="pingjiashijian">{{xiangqingData.evaluate_time}}</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import * as api from '../../utils/api'

  export default {
    name: "guanlipingjia",
    data() {
      return {
        pingjiaxingji: null,
        pingjiakuang: false,
        colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
        tableData: [],
        elPage: 1,
        pageSize: 4,
        dialogVisible: false,
        xiangqingData: [],
        chaxunneirong: '',
        shijianfanwei: [],
        starttime: '',
        endtime: '',
        minganci: false,
        mingancishuzu: [],
        mingancineirong: '',
        num: 2,
        xuanzeleixing: '',
      }
    },
    watch: {
      shijianfanwei: function () {
        // console.log(this.shijianfanwei)
        this.starttime = this.shijianfanwei[0]
        this.endtime = this.shijianfanwei[1]
        // console.log(this.starttime)
        // console.log(this.endtime)
      }
    },
    computed: {
      dangqianyeTableData() {
        let kaishi = (this.elPage - 1) * this.pageSize;
        return this.tableData.slice(kaishi, kaishi + this.pageSize)
      }
    },
    created() {
      this.chaxun()
      this.chaminganci()
    },
    methods: {
      //查询所有评论
      chaxun() {
        // console.log(this.shijianfanwei)
        this.axios({
          url: api.GET_FINDDRIVEREVAL,
          method: 'get',
          params: {

          }
        }).then(data => {
          // console.log(data)
          if (data.data.code === 200) {
            // console.log('查询所有评价成功')
            this.tableData = data.data.data
          }
        })
      },
      //条件查询评论
      tiaojianchaxun() {
        if (this.xuanzeleixing === '查询全部') {
          this.chaxun()
        } else {
          this.axios({
            url: api.GET_FINDDRIVEREVAL,
            method: 'get',
            params: {
              string: this.xuanzeleixing,
              string2: this.chaxunneirong,
              orderTime: this.starttime,
              orderTimeEnd: this.endtime,
            }
          }).then(data => {
            console.log(data)
            if (data.data.code === 200) {
              // console.log('查询所有评价成功')
              this.tableData = data.data.data
              this.xuanzeleixing = ''
              this.chaxunneirong = ''
              this.shijianfanwei = []
              this.elPage = 1
            }
          })
        }

      },
      elChangePage(val) {
        // console.log('当前页是第' + val + '页');
        this.elPage = val
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      dianjixiangqing(data) {
        this.dialogVisible = true
        this.xiangqingData = data
        // console.log(data)
      },
      //确认删除该评价
      open(data) {
        // console.log(data.id)
        this.$confirm('此操作将永久删除该评价, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // console.log(data.id)
          this.axios({
            url: api.POST_DELDRIVEREVAL,
            method: 'get',
            params: {
              id: data.id
            }
          }).then(data => {
            // console.log(data)
            this.chaxun()
            if (data.data.code === 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });

            } else {
              this.$message({
                type: 'info',
                message: '删除失败，请重新删除'
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //查询敏感词
      chaminganci() {
        this.axios({
          url: api.GET_SENSITIVEWORDS,
          method: 'get',
          params: {

          }
        }).then(data => {
          // console.log(data)

          if (data.data.code === 200) {
            this.mingancineirong = data.data.data[0].sensitive_words

          }
          // for (let i=0;i<data.data.data.length;i++){
          //     this.mingancishuzu.push(data.data.data[i].sensitive_words)
          // }
          // this.mingancineirong = this.mingancishuzu.toString().split(',').join(' ')
          // console.log(this.mingancineirong)
        })
      },
      //修改敏感词
      quedingminganci() {
        // console.log(this.mingancineirong)
        this.axios({
          url: api.GET_UPDATESENSITIVEWORDS,
          method: 'get',
          params: {
            sensitive_words: this.mingancineirong
          }
        }).then(data => {
          // console.log(data)
          if (data.data.code === 200) {
            this.$message({
              type: 'success',
              message: '敏感词设置成功'
            });
            this.minganci = false
          }
        })

      },
      quedingpingjia() {
        // console.log(this.pingjiaxingji)
        this.pingjiaxingji = null
        this.pingjiakuang = false
      }

    }
  }
</script>
<style>
</style>
<style scoped lang="less">
  /deep/.el-table th>.cell {
    text-align: center;
  }

  /deep/.el-table .cell {
    text-align: center;
  }

  #beijing {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    // padding: 5rem 10rem;
    /*background-color: #92d0e5;*/
  }

  .el-dialog p,
  .el-dialog span {
    font-size: 1.6rem;
    margin: 1rem;
  }

  .el-dialog .el-rate {
    margin-left: 2rem;
    font-size: 3rem;
  }

  .my {
    font-size: 26px !important;
    margin-right: 10px;
  }

  .el-rate__icon {
    font-size: 26px !important;
  }

  .el-input {
    width: 18rem !important;
    margin-right: 1rem;
    float: left;
    /*margin-right: 1rem;*/
    padding: 0 0 0 0.5rem !important;
  }

  #chaxun {
    width: 100%;
    height: 6rem;
    /*border: 1px solid red;*/
  }

  .block {
    float: left;

    // margin:0 4rem 0 4rem;
    span {
      margin-right: 1rem;
    }
  }

  #chaxun>.el-button:nth-of-type(1) {
    float: left;
    margin:0 1rem;
  }

  #chaxun>.el-button:nth-of-type(2) {
    float: left;
  }
  #chaxun>.el-button:nth-of-type(3) {
    float: right;
  }
  .el-rate>.el-rate__item>.el-rate__icon {
    font-size: 24px;
    color: #005377;
  }

  .mingancishurukuang {
    margin: 2rem 0;
    font-size: 1.6rem;
  }

  .dialog-footer>.el-button {
    margin: 0 3rem;
  }

  #pingjiashijian {
    margin-top: 2rem;
    text-align: right;
    color: #F7BA2A;
    font-size: 1.6rem;
  }

  .el-pagination {
    margin: 2rem 0;
  }
  #jutineirong {
    text-indent: 3rem;
    margin-top: 2rem;
    color: #005377;
  }
  #mingantishi {
    font-size: 1.4rem;
  }

  .pingjiakuang>span {
    float: left;
  }

  .pingjiakuang>.el-dialog {
    float: left;
    width: 20rem;
    border: 1px solid red;
  }

  .xialakuang {
    float: left;
    width: 14rem;
    margin-left: 2rem;
    margin-right: 2rem;
  }

  .el-pagination {
    text-align: center;
  }

  #xingshu {
    width: 100%;
    height: 5rem;

    p {
      width: 4rem;
      float: left;
    }

    .el-rate {
      width: 20rem;
      float: left;
      line-height: 5rem;
    }
  }
</style>